import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

import NProgress from 'nprogress'

import DefaultLayout from '@/layouts/DefaultLayout'

const routes = [
  // 框架内的路由
  {
    path: '/',
    name: 'Layout',
    component: DefaultLayout,
    children: [
      {
        path: 'icon',
        name: 'icon',
        meta: { title: '图标' },
        component: () => import('../views/homework/icon.vue')
      },
      {
        path: 'buttonAndLink',
        name: 'ButtonAndLink',
        meta: { title: '按钮和文字链接' },
        component: () => import('../views/homework/ButtonAndLink.vue')
      },
      {
        path: 'radioAndCheckbox',
        name: 'RadioAndCheckbox',
        meta: { title: '单选框和多选框' },
        component: () => import('../views/homework/RadioAndCheckbox.vue')
      },
      {
        path: 'input',
        name: 'Input',
        meta: { title: '输入框' },
        component: () => import('../views/homework/input.vue')
      },
      {
        path: 'select',
        name: 'Select',
        meta: { title: '选择器' },
        component: () => import('../views/homework/select.vue')
      },
      {
        path: 'datepicker',
        name: 'DatePicker',
        meta: { title: '日期选择器' },
        component: () => import('../views/homework/DatePicker.vue')
      },
      {
        path: 'form',
        name: 'Form',
        meta: { title: '表单' },
        component: () => import('../views/homework/Form.vue')
      },
      {
        path: 'table',
        name: 'Table',
        meta: { title: '表格' },
        component: () => import('../views/homework/Table.vue')
      },
      {
        path: 'pagination',
        name: 'Pagination',
        meta: { title: '分页' },
        component: () => import('../views/homework/Pagination.vue')
      },
      {
        path: 'message',
        name: 'Message',
        meta: { title: '消息提示' },
        component: () => import('../views/homework/Message.vue')
      },
      {
        path: 'messagebox',
        name: 'MessageBox',
        meta: { title: '弹框' },
        component: () => import('../views/homework/MessageBox.vue')
      },
      {
        path: 'navmenu',
        name: 'NavMenu',
        meta: { title: '导航菜单' },
        component: () => import('../views/homework/NavMenu.vue')
      },
      {
        path: 'tabs',
        name: 'Tabs',
        meta: { title: '标签页' },
        component: () => import('../views/homework/Tabs.vue')
      },
      {
        path: 'dialog',
        name: 'Dialog',
        meta: { title: '对话框' },
        component: () => import('../views/homework/Dialog.vue')
      },
      {
        path: 'card',
        name: 'Card',
        meta: { title: '卡片' },
        component: () => import('../views/homework/Card.vue')
      },
      {
        path: 'carousel',
        name: 'Carousel',
        meta: { title: '走马灯' },
        component: () => import('../views/homework/Carousel.vue')
      },
      {
        path: 'image',
        name: 'Image',
        meta: { title: '图片' },
        component: () => import('../views/homework/Image.vue')
      },
      {
        path: 'drawer',
        name: 'Drawer',
        meta: { title: '抽屉' },
        component: () => import('../views/homework/Drawer.vue')
      },
      {
        path: '',
        name: 'Home',
        meta: { title: '首页' },
        component: () => import('../views/Home.vue')
      },
      {
        path: 'about',
        name: 'About',
        meta: { title: '关于页面' },
        component: () => import('../views/About.vue')
      },
      {
        path: 'setting',
        name: 'Setting',
        component: () => import('../views/Setting.vue')
      },
      {
        path: 'system',
        name: 'System',
        component: () => import('../views/System.vue'),
        children: [
          // /system/user
          {
            path: 'user',
            name: 'SystemUser',
            component: () => import('../views/SystemUser.vue'),
          },
          // /system/role
          {
            path: 'role',
            name: 'SystemRole',
            component: () => import('../views/SystemRole.vue'),
          }
        ]
      }
    ]
  },

  // 框架外的路由
  {
    path: '/login',
    name: 'Login',
    component: () => import('../views/Login.vue')
  },
  {
    path: '*',
    name: 'NotFound',
    component: () => import("@/views/404.vue")
  },
]

const router = new VueRouter({
  routes
})

// 设置路由：前置守卫
router.beforeEach((to, from, next) => {
  console.log("要前往的页面", to)
  console.log("原来的页面", from)

  NProgress.start()

  // const { path, meta: { title } } = to

  // if (title) {
  //   document.title = title
  // } else {
  //   document.title = "没有标题"
  // }

  // if (path === '/setting') {
  //   console.log("被拦截了")
  //   next("/no-found")
  // } else {
  //   next()
  // }

  next()
})

router.afterEach(() => {
  NProgress.done()
})

export default router
